<template>
  <div class="upgrade-strategy-list-container">
    <div class="local-name">
      升级策略
      <el-button
        size="small"
        type="success"
        v-if="userGuardList.includes(guard.UpgradeManage)"
        @click="showAdd"
      >
        <svg-icon icon-class="add"></svg-icon> 新建
      </el-button>
    </div>
    <div class="data-table">
      <data-table
        v-model="sort"
        :tableData="tableData"
        @search="search"
      ></data-table>
    </div>
    <div class="paging-footer">
      <el-pagination
        background
        @size-change="pageSizeChangeHandler"
        @current-change="currentPageChangeHandler"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :page-sizes="pageSizes"
        layout="total,sizes, prev, pager, next, jumper"
        :total="totalCount"
        align="right"
      ></el-pagination>
    </div>
    <add
      ref="addComponent"
      @refresh="search"
    ></add>
  </div>
</template>

<script>
import Add from './add';
import * as moment from 'moment';
import DataTable from './dataTable';
import { SortType, MomentFormat } from '../../../constants/common';
import { Message } from 'element-ui';
import { parseError } from '../../../utils';
import { getUpgradeStrategyListApi } from '../../../api/upgradeStrategy';

export default {
  components: {
    DataTable,
    Add
  },
  data() {
    return {
      sort: {
        orderBy: 'createdAt',
        SortType: SortType.DESC
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      pageSizes: [5, 10, 20, 50, 100],
      totalCount: 0
    };
  },
  created() {
    this.search();
  },
  methods: {
    search() {
      getUpgradeStrategyListApi(this.currentPage - 1, this.pageSize, this.sort.SortType)
        .then(({ total_count, data }) => {
          this.totalCount = total_count;
          this.tableData = data.map(upgradeStrategy => {
            return {
              uuid: upgradeStrategy.uuid,
              description: upgradeStrategy.description,
              active: upgradeStrategy.active,
              deviceList: upgradeStrategy.device_list
            };
          });
        })
        .catch(error => Message.error(parseError(error)));
    },
    showAdd() {
      this.$refs.addComponent.showDialog();
    },
    pageSizeChangeHandler() {
      this.currentPage = 1;
      this.search();
    },
    currentPageChangeHandler() {
      this.search();
    }
  }
};
</script>

<style lang="scss" scoped>
.upgrade-strategy-list-container {
  .data-table {
    padding: 10px;
    background-color: #fff;
  }
  .local-name {
    padding: 10px 10px 20px 10px;
    font-size: 24px;
    font-weight: 800;
    .el-button--success {
      float: right;
      background-color: #2c83b1 !important;
      border-color: #2c83b1 !important;
    }
  }
  padding: 10px;
  .paging-footer {
    padding: 10px;
    background-color: #fff;
  }
}
</style>
